<template>
    <div>
        <h1 style="display: inline-block">数据中心 </h1>
        <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="10">
                <el-card header="完整调研报告" style="font-weight: bold;">
                    <h1>地区</h1>
                    <div v-for="data in area">
                        <span v-for="(childindex,chilItem) in data" :key="childItem">
                            {{chilItem+"："}}{{data[chilItem]}}
                        </span>
                    </div>
                    <el-divider/>
                    <h1>企业类型</h1>
                    <div v-for="data in orgType">
                       <span v-for="(childindex,chilItem) in data" :key="childItem">
                            {{chilItem+"："}}{{data[chilItem]}}
                        </span>
                    </div>
                    <el-divider/>
                    <h1>行业</h1>
                    <div v-for="data in busiType">
                         <span v-for="(childindex,chilItem) in data" :key="childItem">
                            {{chilItem+"："}}{{data[chilItem]}}
                        </span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="14">
                <el-card header="细分指数" style="font-weight: bold;height: 577px">
                    <div ref="detail" style="width: 600px; height: 400px"></div>
                </el-card>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import {getCompleteReport, getData} from "../../../api/paperMG";

    export default {
        name: "data-visual",
        data() {
            return {
                myObject: {
                    dataInfo: [],
                    nameList: []
                },
                avgObject: {
                    dataInfo: [],
                    nameList: []
                },
                runningIndex: 0,
                area:[],
                busiType:[],
                orgType:[],
            };

        },
        created() {
            //数据报告
            console.log("=======开始调用完整报告=======");
            getCompleteReport().then(res=>{
                console.log("==========返回完整报告，开始赋值==========");
                console.log(res);
                this.area = res.data.area;
                this.busiType = res.data.busiType;
                this.orgType = res.data.orgType;

                if (res.code === 200) {
                    // 模型类型 1-运行指数
                    let info = {
                        flag: "DEFALUT",
                        token: localStorage.getItem("JWT_TOKEN"),
                        remark: "1"
                    };
                    console.log("====进入雷达图取值阶段====");
                    getData(info).then(res => {
                        console.log("====进入雷达图赋值阶段====");
                        this.myObject.nameList = res.data.myObject.nameList;
                        this.myObject.dataInfo = res.data.myObject.indexList;
                        this.avgObject.dataInfo = res.data.avgObject.indexList;
                        this.runningIndex = res.data.myObject.runningIndex;
                        // console.log(" this.avgObject==>", res.data.avgObject.nameList);
                        // console.log(" this.myObject==>", res.data.myObject.nameList);
                        // console.log(" this.runningIndex==>", this.runningIndex);
                        console.log("res.code",res.code);
                        if (res.code === 200){
                            let myChart = this.$echarts.init(this.$refs.detail);
                            myChart.setOption({
                                legend: {
                                    data: ['全国平均指数'],
                                    left: 'left',
                                },
                                radar: {
                                    indicator: res.data.avgObject.nameList
                                },
                                series: [{
                                    type: 'radar',
                                    data: [
                                        {
                                            value: this.avgObject.dataInfo,
                                            name: '全国平均指数',
                                        }
                                    ]
                                }]
                            });
                        }
                    });
                }
            });
        },

        destroyed() {
            window.removeEventListener('resize', this.initEchart, 20); // 图表自适应导致报错，离开组件清除即可
        }
    };
</script>

<style scoped>

    .report {
        background-image: url("../../../assets/img/dialog.jpg");
    }

</style>